<template>
	<view class="trip">
		
		<!-- 线条 -->
		<view class="view-hr"></view>
		
		<!-- 头部 -->
		<view class="trip-title">
			<view class="trip-title-left">
				<image :src="tripTitle.imgUrl"></image>
				<text>{{ tripTitle.text }}</text>
			</view>

			<view class="trip-title-right" @tap="handerNavTo">
				<image :src="tripTitle.hisUrl"></image>
				<text>{{ tripTitle.hisText }}</text>
			</view>
		</view>
		
		<!-- 内容 -->
		<view class="trip-content">
			<view class="trip-content-ul">
				<view class="trip-content-li" v-for="(item,index) in tripContent" :key="index">
					<!-- 时间 -->
					<view class="trip-time">
						<image :src="item.tiemUrl"></image>
						<text>{{item.timeText}}</text>
					</view>
					
					<!-- 地址 -->
					<view class="trip-address">
						<image :src="item.addressUrl"></image>
						<text>{{item.addresstext}}</text>
					</view>
					
					<!-- 图片 -->
					<view class="trip-img">
						<image :src="item.tripImgUrl"></image>
					</view>
					
					<!-- 价格信息 -->
					<view class="trip-info">
						
						<view class="trip-left">
							<text class="trip-info-title">{{item.tripInfoTitle}}</text>
							<text class="trip-info-price">{{item.tripInfoPrice}}</text>
						</view>
						
						<view class="trip-right">
							<view class="tel">
								<image :src="item.telUrl"></image>
								<text>{{item.telText}}</text>
							</view>
							
							<view class="serve">
								<image :src="item.serveUrl"></image>
								<text>{{item.serveText}}</text>
							</view>
						</view>
					</view>
					
					
					<!-- 按钮-我的账单 -->
					<view class="btn-mine">
						<button class="btn-style">{{item.btnText}}</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 头部的信息
			tripTitle: {
				imgUrl: '../../static/imgs/行程数量icon.png',
				text: '已有9个行程',
				hisUrl: '../../static/imgs/历史.png',
				hisText: '历史'
			},
			
			// 内容
			tripContent:[
				{
					"tiemUrl":'../../static/imgs/QQ20200929-091431@2x.png',
					"timeText":'05-09 11:40周三名厨上门',
					"addressUrl":'../../static/imgs/QQ20200929-091446@2x.png',
					"addresstext":'涪城区长虹国际大道翡翠绿湾1栋2单元1802',
					"tripImgUrl":'../../static/imgs/trip/25.png',
					"tripInfoTitle":'盛夏海鲜宴席',
					"tripInfoPrice":'￥1299/桌',
					"telUrl":'../../static/imgs/QQ20200929-093606@2x.png',
					"telText":'电话',
					"serveUrl":'../../static/imgs/QQ20200929-093626@2x.png',
					"serveText":'服务',
					"btnText":'我的账单'
				},
				{
					"tiemUrl":'../../static/imgs/QQ20200929-091431@2x.png',
					"timeText":'05-09 11:40周三名厨上门',
					"addressUrl":'../../static/imgs/QQ20200929-091446@2x.png',
					"addresstext":'涪城区长虹国际大道翡翠绿湾1栋2单元1802',
					"tripImgUrl":'../../static/imgs/trip/25.png',
					"tripInfoTitle":'盛夏海鲜宴席',
					"tripInfoPrice":'￥1299/桌',
					"telUrl":'../../static/imgs/QQ20200929-093606@2x.png',
					"telText":'电话',
					"serveUrl":'../../static/imgs/QQ20200929-093626@2x.png',
					"serveText":'服务',
					"btnText":'我的账单'
				},
				{
					"tiemUrl":'../../static/imgs/QQ20200929-091431@2x.png',
					"timeText":'05-09 11:40周三名厨上门',
					"addressUrl":'../../static/imgs/QQ20200929-091446@2x.png',
					"addresstext":'涪城区长虹国际大道翡翠绿湾1栋2单元1802',
					"tripImgUrl":'../../static/imgs/trip/25.png',
					"tripInfoTitle":'盛夏海鲜宴席',
					"tripInfoPrice":'￥1299/桌',
					"telUrl":'../../static/imgs/QQ20200929-093606@2x.png',
					"telText":'电话',
					"serveUrl":'../../static/imgs/QQ20200929-093626@2x.png',
					"serveText":'服务',
					"btnText":'我的账单'
				}
			]
			
		};
	},
	onLoad() {},
	methods: {
		handerNavTo(){
			uni.navigateTo({
				url:'/pages/history/history'
			})
		}
	}
};
</script>

<style lang="scss" scoped>
	
	.view-hr{
			border-top: 1rpx solid #efefef;
			margin: 20rpx 0;
	}
	
	
	// 头部
.trip-title {
	padding: 0 40rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.trip-title-left {
		image {
			width: 35rpx;
			height: 35rpx;
			margin-right: 20rpx;
			vertical-align: middle;
		}
	}
	.trip-title-right {
		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 20rpx;
				vertical-align: middle;
		}
		text{
			color: #ccc;
		}
	}
}

// 内容
.trip-content{
	.trip-content-ul{
		padding: 0 40rpx;
		box-sizing: border-box;
		.trip-content-li{
			border: 1rpx solid #efefef;
			box-shadow: 0 0 10rpx #efefef;
			border-radius: 10rpx;
			margin:  20rpx 0;
		
			display: flex;
			flex-direction: column;
			// 时间
			.trip-time,.trip-address{
				margin: 20rpx 0 0 20rpx;
				image{
					width: 35rpx;
					height: 35rpx;
					vertical-align: middle;
					margin-right: 20rpx;
				}
				text{
					color: #666;
				}
			}
			
			//地址
			.trip-img{
				width: 100%;
				height: 420rpx;
				margin-top: 20rpx;
				image{
					height: 100%;
					width: 100%;
				}
			}
		
			// 价格信息
			.trip-info{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 40rpx;
				box-sizing: border-box;
				margin: 20rpx 0;
				.trip-left{
					display: flex;
					flex-direction: column;
					.trip-info-title{
						color: #000;
						font-size: 34rpx;
					}
					.trip-info-price{
						color: #F0AD4E;
						font-size: 30rpx;
						line-height: 2;
					}
				}
				.trip-right{
				display: flex;
					.tel,.serve{
						display: flex;
						flex-direction: column;
						margin-left: 20rpx;
						image{
							width: 50rpx;
							height: 50rpx;
						}
					}
					.serve{
						image{
							width: 60rpx;
							height: 50rpx;
						}
					}
					text{
						font-size: 28rpx;
						color: #F0AD4E;
						text-align: center;
					}
				}
			}
		
			 // 我的账单-按钮
			 .btn-mine{
				 padding: 20rpx;
				 box-sizing: border-box;
				 .btn-style{
					 background-color: #F0AD4E;
					 color: #fff;
					 
				 }
			 }
		}
	}
}
</style>
